<template>
	<view class="skstoast" :class="{ on: isshow }" v-if="isshow">
		<view class="mask"></view>
		<view class="skstoast_box digaddress">
			<image @click.prevent.stop="adddigclose()" class="gbimg" src="/static/images/com_close.png" mode="heightFix"></image>

			<view class="title jj_kb_a">
				<text class="back mhicon icon-back" v-if="addtitTypes != 1" @click.prevent.stop="addback()"></text>
				{{ addtitTypes == 1 ? addtitle.list : addtitTypes == 2 ? addtitle.add : addtitTypes == 3 ? addtitle.edit : addtitle.area }}
				<!-- <text class="close mhicon icon-close" @click.prevent.stop="adddigclose()"></text> -->
			</view>

			<!--收货地址管理-->
			<view class="content" :class="{ bg: addtitTypes == 1, hide: addtitTypes != 1 }">
				<scroll-view :scroll-y="true" class="auto">
					<view class="list">
						<view class="item" v-for="(item, index) in addressListData" :key="index" @click.prevent.stop="addcheckclick(item.add_id)">
							<view class="item-box">
								<view class="ucheckbox icon-dagou flex-center" :class="{ on: local_default == item.add_id }"></view>
								<view class="hd">
									<view class="uname">{{ item.add_name }}</view>
									<view class="phone ell">
										{{ changePhone(item.add_tel) }}
									</view>
								</view>
								<view class="add">{{ item.quyu }} {{ item.add_address }}</view>
								<view class="bd flex-between">
									<view class="tags flex">
										<view class="tt deft" v-if="item.add_default == 1">
											<text class="span">默认</text>
										</view>
										<view
											class="tt"
											v-if="item.add_tag"
											:class="{
												comp: item.add_tag == '公司',
												home: item.add_tag == '家里',
											}"
										>
											<text class="span">
												{{ item.add_tag }}
											</text>
										</view>
									</view>
									<view class="edit jj_kk_b" @click.prevent.stop="addedit(item, index)">编辑信息</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="tool flex-between">
					<view @click.prevent.stop="addAddressType(0)" class="btns jj_kk_b flex-center">
						<view class="ttt">新增收货地址</view>
					</view>
					<view @click.prevent.stop="addcheck" class="btns flex-center btn-bg btn-bg-small colorbg-box">
						<view class="ttt">确认选择</view>
					</view>
				</view>
			</view>

			<!--新建丶编辑收货地址 -->
			<view class="content" :class="{ hide: addtitTypes != 2 && addtitTypes != 3 }">
				<view class="auto">
					<form autocomplete="off" @submit.prevent="addressSubmit(addressFormData.add_id)">
						<view class="form">
							<view class="item">
								<view class="label">收货人姓名</view>
								<view class="text jj_kk_a">
									<input
										type="text"
										class="input"
										placeholder="请输入收货人姓名"
										placeholder-class="placeholder"
										:value="addressFormData.add_name"
										@blur.prevent.stop="getattrinput($event, 'add_name')"
									/>
								</view>
							</view>
							<view class="item">
								<view class="label">收货人手机</view>
								<view class="text jj_kk_a">
									<input
										type="number"
										class="input"
										placeholder="请输入收货人电话"
										placeholder-class="placeholder"
										:value="addressFormData.add_tel"
										@blur.prevent.stop="getattrinput($event, 'add_tel')"
									/>
								</view>
							</view>
							<view class="item">
								<view class="label">所在区域</view>
								<view class="text">
									<view class="area flex-between" @click.prevent.stop="editdistpicker()">
										<input
											type="text"
											class="input ell"
											readonly
											disabled="true"
											placeholder="请选择收货人所在区域"
											placeholder-class="placeholder"
											:value="addressFormData.quyu"
											@blur.prevent.stop="getattrinput($event, 'quyu')"
										/>
										<view class="more">
											可更换
											<text class="icons icon-getinto"></text>
										</view>
									</view>
								</view>
							</view>
							<view class="item flex flex-align-start">
								<view class="label" style="line-height: 40rpx">详细地址</view>
								<view class="text jj_kk_a">
									<textarea
										class="textarea"
										disable-default-padding
										placeholder="请输入收货人所处的详细地址(精确至门牌号)"
										placeholder-class="placeholder"
										v-if="addtitTypes == 2 || addtitTypes == 3"
										:value="addressFormData.add_address"
										@blur.prevent.stop="getattrinput($event, 'add_address')"
									></textarea>
								</view>
							</view>
							<view class="item deft">
								<view class="label">设为默认</view>
								<view class="switchbtn flex-center" @click.stop="switchChange()">
									<view
										class="uswitch"
										:class="{
											on: addressFormData.add_default == 1,
										}"
									></view>
								</view>
							</view>
							<view class="tool flex-between">
								<view @click.prevent.stop="wxAddress()" class="btns jj_kk_b flex-center">
									<view class="ttt">一键导入微信地址</view>
								</view>
								<view class="btns flex-center btn-bg btn-bg-small colorbg-box">
									<view class="ttt">保存</view>
									<button class="button" form-type="submit"></button>
								</view>
							</view>
						</view>
					</form>
				</view>
			</view>

			<!--选择所在区域-->
			<view class="content city" :class="{ hide: addtitTypes != 4 }">
				<view class="cityhd jj_kb_a">
					<view class="item" :class="{ active: addressTab === 1 }" @click.prevent.stop="resetProvince">
						{{ codeProvinceName ? codeProvinceName : '请选择省' }}
					</view>
					<view v-if="showCityTab" class="item" :class="{ active: addressTab === 2 }" @click.prevent.stop="resetCity">
						{{ codeCityName ? codeCityName : '请选择市' }}
					</view>
					<view v-if="showAreaTab" class="item" :class="{ active: addressTab === 3 }">
						{{ codeAreaName ? codeAreaName : '请选择市' }}
					</view>
				</view>
				<scroll-view :scroll-y="true" class="citybd">
					<view v-if="addressTab == 1" class="provice">
						<view
							class="item"
							:class="{ active: item.ct_id === codeProvince }"
							v-for="(item, index) in proviceListData"
							:key="index"
							@click.prevent.stop="chooseProvince(item.ct_id, index)"
						>
							{{ item.ct_name }}
						</view>
					</view>
					<view v-if="addressTab == 2" class="city">
						<view
							class="item"
							:class="{ active: item.ct_id === codeCity }"
							v-for="(item, index) in cityListData"
							:key="index"
							@click.prevent.stop="chooseCity(item.ct_id, index)"
						>
							{{ item.ct_name }}
						</view>
					</view>
					<view v-if="addressTab == 3" class="area">
						<view
							class="item"
							:data-value="item.ct_id"
							:data-v="codeArea"
							:class="{ active: item.ct_id === codeArea }"
							v-for="(item, index) in areaListData"
							:key="index"
							@click.prevent.stop="chooseArea(item.ct_id, index)"
						>
							{{ item.ct_name }}
						</view>
					</view>
				</scroll-view>
				<!-- <view class="tool">
					<view class="btns" @click.prevent.stop="addback()">取消</view>
					<view class="btns btns-primary" @click.prevent.stop="sureselect">确定</view>
				</view> -->
				<view class="tool flex-between">
					<view @click.prevent.stop="sureselect" class="btns btn_flex flex-center btn-bg btn-bg-small colorbg-box">
						<view class="ttt">确定</view>
					</view>
				</view>
			</view>
		</view>
		<privacybox ref="privacybox"></privacybox>
	</view>
</template>

<script>
import AddressParse from '@/util/zh-address-parse.min.js';
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'address',
	props: {
		isdefAdd: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			isshow: false,
			addtitle: {
				list: '选择收货地址',
				add: '新建收货地址',
				edit: '编辑收货地址',
				area: '选择所在区域',
			},
			addtitTypes: 1,
			local_default: '', //记录默认状态
			addressFormData: {
				add_id: 0, //ID
				add_name: '', //姓名
				add_tel: '', //电话
				types: 1,
				add_tag: '', //类型
				add_default: 0, //是否为默认地址
				quyu: '', //区域
				add_address: '', //详细地址
				add_citycode: '',
			},
			fristtime: 1,
			addressListData: [],
			proviceListData: [],
			cityListData: [],
			areaListData: [],
			showCityTab: false,
			showAreaTab: false,
			addressTab: 1,
			citytabs: 0,
			codeCityId: '',
			codeProvince: '',
			codeCity: '',
			codeArea: '',
			codeProvinceName: '',
			codeCityName: '',
			codeAreaName: '',
			addressid: '', //
		};
	},

	created() {
		this.getareasList();
		if (this.isdefAdd == 1) {
			this.getAddressList();
		}
	},

	methods: {
		//导入微信地址
		wxAddress() {
			let _this = this;
			wx.chooseAddress({
				success: function (res) {
					_this.setcityjson(res);
				},
				fail: () => {},
			});
		},

		setcityjson(res) {
			let addcity_id = '';
			if (this.proviceListData.length > 0) {
				let provice = this.proviceListData.filter((elem, i) => {
					return res.provinceName.indexOf(elem.ct_name) !== -1;
				});
				if (provice.length > 0) {
					provice = provice[0];
					addcity_id = provice.ct_id;
					let city = provice.data.filter((elem, i) => {
						return res.cityName.indexOf(elem.ct_name) !== -1;
					});
					if (city.length > 0) {
						city = city[0];
						addcity_id = city.ct_id;
						let area = city.data.filter((elem, i) => {
							return res.countyName.indexOf(elem.ct_name) !== -1;
						});
						if (area.length > 0) {
							area = area[0];
							addcity_id = area.ct_id;
						}
					}
				}
				this.geteditaddress(addcity_id);
			}
			this.addressFormData.quyu = this.codeProvinceName + this.codeCityName + this.codeAreaName;
			this.addressFormData.add_name = res.userName;
			this.addressFormData.add_tel = res.telNumber;
			this.addressFormData.add_address = res.detailInfo;
		},

		//编辑时选中省
		geteditaddress(citycode) {
			if (citycode) {
				let provice_id = citycode.substring(0, 2);
				provice_id = provice_id + '0000';
				let provice_data = this.proviceListData.filter((elem, i) => {
					return elem.ct_id == provice_id;
				});
				if (provice_data.length > 0) {
					provice_data = provice_data[0];
					this.addressTab = 1;
					this.showCityTab = false;
					this.showAreaTab = false;
					this.addressFormData.add_citycode = provice_data.ct_id;
					this.codeProvinceName = provice_data.ct_name;
					this.codeProvince = provice_data.ct_id;
					this.cityListData = provice_data.data;
					let city_id = citycode.substring(0, 4);
					city_id = city_id + '00';
					let city_data = provice_data.data.filter((elem, i) => {
						return elem.ct_id == city_id;
					});
					if (city_data.length > 0) {
						city_data = city_data[0];
						this.addressTab = 2;
						this.showCityTab = true;
						this.showAreaTab = false;
						this.addressFormData.add_citycode = city_data.ct_id;
						this.codeCityName = city_data.ct_name;
						this.codeCity = city_data.ct_id;
						this.areaListData = city_data.data;
						let area_data = city_data.data.filter((elem, i) => {
							return elem.ct_id == citycode;
						});
						if (area_data.length > 0) {
							area_data = area_data[0];
							this.addressTab = 3;
							this.showCityTab = true;
							this.showAreaTab = true;
							this.addressFormData.add_citycode = area_data.ct_id;
							this.codeArea = area_data.ct_id;
							this.codeAreaName = area_data.ct_name;
						}
					}
				}
			} else {
				this.addressTab = 1;
				this.showCityTab = false;
				this.showAreaTab = false;
				this.codeProvince = '';
				this.codeCity = '';
				this.codeArea = '';
				this.codeProvinceName = '';
				this.codeCityName = '';
				this.codeAreaName = '';
				this.formatAddress();
			}
		},
		formatAddress() {
			var _this = this;
			// this.privacy_show_Judge('show_privacys').then(result => {
			// 	if (result) {
			// 		// 需要弹窗
			// 		_this.$refs.privacybox.propshow();
			// 		return
			// 	}
			// });
			uni.getClipboardData({
				success: function (res) {
					uni.hideToast();
					var val = res.data;
					var ExcludeKeys = [
						{
							oldV: '上海市',
							newV: '上海',
						},
						{
							oldV: '重庆市',
							newV: '重庆',
						},
						{
							oldV: '天津市',
							newV: '天津',
						},
						{
							oldV: '北京市',
							newV: '北京',
						},
					];
					for (let item of ExcludeKeys) {
						val = val.replace(new RegExp(item.oldV, 'g'), item.newV);
					}
					var parseResult = AddressParse(val, 0);
					if (parseResult.province && parseResult.city) {
						uni.showModal({
							title: '是否使用剪切板地址？',
							content: val + '',
							confirmText: '使用',
							cancelText: '暂不使用',
							success(cRes) {
								if (cRes.confirm) {
									_this.codeProvinceName = parseResult.province;
									_this.codeCityName = parseResult.city;
									_this.codeAreaName = parseResult.area;
									_this.codeArea = parseResult.area;
									var params = {
										cityName: parseResult.city,
										countyName: parseResult.area,
										provinceName: parseResult.province,
										userName: parseResult.name,
										telNumber: parseResult.phone,
										detailInfo: parseResult.detail,
									};
									_this.setcityjson(params);
								}
							},
						});
					}
				},
			});
		},
		fundig(addressid) {
			this.isshow = true;
			this.local_default = addressid;
			this.getAddressList();
		},

		//关闭弹出框
		adddigclose() {
			this.isshow = false;
			this.addtitTypes = 1;
			this.addressFormData = this.$options.data().addressFormData;
			this.$emit('addclose', false);
		},

		//input输入框
		getattrinput(event, name) {
			this.addressFormData[name] = event.detail.value;
		},

		//获取收货地址
		getAddressList() {
			let _this = this,
				usertoken = uni.getStorageSync('usertoken');
			uni.request({
				header: this.headers,
				method: 'post',
				data: {
					usertoken: usertoken,
				},
				url: this.apiUrl + this.apiFilename + '/appapi.php?act=getuseraddress',
				success(res) {
					uni.hideLoading();
					let data = res.data;
					if (data.status != 1) {
						_this.addressListData = [];
						return;
					}
					_this.addressListData = data.data;
					if (data.data && data.data.length > 0) {
						let dataarr = data.data[0];
						if (!_this.local_default) {
							_this.local_default = dataarr.add_id;
						}
						if (_this.fristtime == 1 && _this.isdefAdd == 1) {
							_this.$emit('addtoid', data.data[0]);
							_this.fristtime = 0;
						}
					}
				},
				fail: res => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
				complete() {},
			});
		},

		//选择收货地址checked
		addcheckclick(id) {
			this.local_default = id;
		},

		//选择收货地址(确认按钮)
		addcheck() {
			let _this = this;
			if (_this.addressListData.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '暂无收货地址可选',
				});
				return false;
			}
			let defarr = _this.addressListData.filter((elem, i) => {
				return _this.local_default == elem.add_id;
			});
			defarr = defarr[0];
			this.adddigclose();
			_this.$emit('addtoid', defarr);
		},

		//新建收货地址
		addAddressType(id) {
			this.addtitTypes = 2;
			this.citytabs = 0;
			this.addressFormData = this.$options.data().addressFormData;
			this.addressFormData.add_id = id;
			this.geteditaddress();
		},

		//编辑收货地址
		addedit(item, index) {
			let items = Object.assign({}, item);
			this.addtitTypes = 3;
			this.citytabs = 1;
			this.addressFormData = items;
			this.addressFormData.index = index;
			this.addcheckclick(items.add_id);
			this.geteditaddress(items.add_citycode);
		},

		//默认地址switch
		switchChange(e) {
			this.addressFormData.add_default == 1 ? (this.addressFormData.add_default = 0) : (this.addressFormData.add_default = 1);
		},

		//新建丶编辑收货地址提交
		addressSubmit(id) {
			let data = this.addressFormData;
			if (!data.add_name) {
				this.com_msg('请输入收货人姓名');
				return;
			}
			if (!this.checkphone.test(data.add_tel) && !this.checkphone.test(data.add_tel)) {
				this.com_msg('请输入正确的电话号码');
				return;
			}
			if (!data.add_citycode) {
				this.com_msg('请选择收货区域');
				return;
			}
			if (data.add_citycode && !this.codeArea) {
				this.com_msg('请选择完整地址');
				return;
			}
			if (!data.add_address) {
				this.com_msg('请输入收货人所处的详细地址(精确至门牌号)');
				return;
			}
			let _this = this,
				usertoken = uni.getStorageSync('usertoken');
			if (!usertoken) usertoken = this.testtoken;
			data.usertoken = usertoken;
			let url;
			if (id) {
				data.id = id;
				url = this.apiUrl + this.apiFilename + '/appapi.php?act=edituseraddress';
			} else {
				url = this.apiUrl + this.apiFilename + '/appapi.php?act=adduseraddress';
			}
			uni.request({
				header: this.headers,
				data: data,
				method: 'post',
				url: url,
				success(res) {
					let data = res.data;
					if (data.status == 1) {
						uni.showToast({
							title: data.msg,
							icon: 'success',
						});
						_this.addtitTypes = 1;
						//新增
						if (_this.addressFormData.add_id == 0) {
							if (_this.addressFormData.add_default == 1) {
								_this.addressListData.forEach((elem, i) => {
									_this.addressListData[i].add_default = 0;
								});
							}
							_this.addressFormData.add_id = data.data.add_id;
							var addjson = _this.addressFormData;
							_this.$set(_this.addressListData, _this.addressListData.length, addjson);
							_this.addressFormData = _this.$options.data().addressFormData;
							_this.local_default = addjson.add_id;
							_this.addcheck();
						}
						//修改
						else {
							var jsonindex = _this.addressFormData.index;
							_this.addressListData[jsonindex] = _this.addressFormData;
							if (_this.addressFormData.add_default == 1) {
								_this.addressListData.forEach((elem, i) => {
									_this.addressListData[i].add_default = 0;
								});
								_this.addressListData[jsonindex].add_default = 1;
							}
						}
						_this.getarrs(_this.addressListData);
					} else if (data.status == 0) {
						_this.com_msg(data.msg);
					}
				},
				fail: res => {
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
			});
		},

		getarrs(arr) {
			return arr.sort(function (a, b) {
				if (a.add_default == b.add_default) {
					return b.add_id - a.add_id;
				} else {
					return b.add_default - a.add_default;
				}
			});
		},

		//选择地址类型
		getaddtypes(e) {
			this.addressFormData.add_tag = e == this.addressFormData.add_tag ? '' : e;
		},

		//选择默认地址
		getdefault(index) {
			if (this.addressFormData.isdefault != index) {
				this.addressFormData.isdefault = index;
			}
		},

		//收货地址选择地区
		editdistpicker() {
			this.addtitTypes = 4;
		},

		//返回
		addback() {
			this.address = false;
			if (this.citytabs == 0) {
				if (this.addtitTypes == 2) {
					this.addtitTypes = 1;
				} else {
					this.addtitTypes = 2;
				}
			} else {
				if (this.addtitTypes == 4) {
					this.addtitTypes = 3;
				} else {
					this.addtitTypes = 1;
				}
			}
			this.geteditaddress(this.addressFormData.add_citycode);
		},

		//收货地址-选择地区
		getareasList() {
			let _this = this;
			uni.request({
				header: this.headers,
				url: this.apiUrl + this.apiFilename + '/base/province',
				method: 'GET',
				success(res) {
					// let data = res.data.data;
					// _this.proviceListData = data;
					let data = res.data;
					if (data.state == 1) {
						_this.proviceListData = data.info;
					}
				},
				fail: res => {
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
			});
		},

		//选中省
		chooseProvince(id, index) {
			this.cityListData = this.proviceListData[index].data;
			this.addressTab = 2;
			this.codeProvince = id;
			this.showCityTab = true;
			this.codeProvinceName = this.proviceListData[index].ct_name;
			this.codeCityId = this.proviceListData[index].ct_id;
		},

		//选中市
		chooseCity(id, index) {
			this.areaListData = this.cityListData[index].data;
			this.addressTab = 3;
			this.codeCity = id;
			this.showAreaTab = true;
			this.codeCityName = this.cityListData[index].ct_name;
			this.codeCityId = this.cityListData[index].ct_id;
		},

		//选择区
		chooseArea(id, index) {
			this.codeArea = id;
			this.codeAreaName = this.areaListData[index].ct_name;
			this.codeCityId = this.areaListData[index].ct_id;
		},

		//重置省
		resetProvince() {
			this.addressTab = 1;
			this.codeProvince = '';
			this.codeCity = '';
			this.codeArea = '';
			this.showCityTab = false;
			this.showAreaTab = false;
			this.codeProvinceName = '';
			this.codeCityName = '';
			this.codeAreaName = '';
		},

		//重置市
		resetCity() {
			this.addressTab = 2;
			this.codeArea = '';
			this.showAreaTab = false;
			this.codeAreaName = '';
		},

		//确认省市区
		sureselect() {
			if (this.codeProvince) {
				this.codeCityId = this.codeProvince;
			}
			if (this.codeCity) {
				this.codeCityId = this.codeCity;
			}
			if (this.codeArea) {
				this.codeCityId = this.codeArea;
			}
			this.citytabs == 0 ? (this.addtitTypes = 2) : (this.addtitTypes = 3);
			this.addressFormData.quyu = this.codeProvinceName + this.codeCityName + this.codeAreaName;
			this.addressFormData.add_citycode = this.codeCityId;
		},
	},
};
</script>

<style lang="scss">
.digaddress {
	.content {
		height: 785rpx;
		padding: 32rpx 0 110rpx;
		position: relative;
		z-index: 1;
		border-radius: 0 0 16rpx 16rpx;
		overflow: hidden;

		&.bg {
			background: #f1f1f1;
			position: relative;
		}

		/*地址选择框*/
		.auto {
			height: 642rpx;
		}

		.list {
			padding: 0 40rpx 0 20rpx;

			.item {
				margin-bottom: 32rpx;
				position: relative;
				padding-left: 58rpx;

				.item-box {
					background: #fff;
					padding: 30rpx;
					border-radius: 16rpx;
				}

				.ucheckbox {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.hd {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					line-height: 40rpx;
					font-weight: bold;
					color: #282828;

					.uname {
						white-space: nowrap;
					}

					.phone {
						margin-left: 38rpx;
					}
				}

				.add {
					font-size: 28rpx;
					line-height: 40rpx;
					color: #999;
					margin-top: 15rpx;
				}

				.bd {
					border: none !important;
					margin-top: 17rpx;

					.tags {
						.tt {
							width: 58rpx;
							height: 28rpx;
							line-height: 28rpx;
							border-radius: 4rpx;
							text-align: center;
							font-size: 20rpx;

							&:not(:last-child) {
								margin-right: 13rpx;
							}
						}

						.deft {
							color: #f8ebd7;
							background: #1c1c1c;
						}

						.comp {
							color: #f8ebd7;
							background: #1c1c1c;
						}

						.home {
							color: #f8ebd7;
							background: #1c1c1c;
						}
					}

					.edit {
						width: 156rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 24rpx;
						color: #b1b1b1;
						border-radius: 8rpx;

						&.jj_kk_b::before {
							border-radius: 24rpx;
						}
					}
				}
			}
		}

		.tool {
			width: 100%;
			height: 120rpx;
			display: flex;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 22;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			box-shadow: 0px -1rpx 0px 0px #ededed;

			.btns {
				width: 304rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				border-radius: 16rpx;
				color: #313131;
				position: relative;

				&.btn_flex {
					flex: 1;
				}

				.button {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 5;
					opacity: 0;
					width: 100%;
					height: 100%;
				}

				&:not(:last-child) {
					margin-right: 24rpx;
				}

				&.jj_kk_b::before {
					border-radius: 40rpx;
					border-color: #313131;
				}
			}

			// .btns {
			// 	width: 50%;
			// 	height: 90rpx;
			// 	line-height: 90rpx;
			// 	background: #fff;
			// 	border-radius: 0;
			// 	font-size: 28rpx;
			// 	color: #323232;
			// 	text-align: center;
			// }

			// .btns-primary {
			// 	background: var(--primary-bg-color);
			// }
		}

		.toolss {
			width: 100%;
			box-shadow: 0 -10rpx 10rpx rgba($color: #000000, $alpha: 0.02);
			display: flex;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 22;

			.btns {
				width: 50%;
				height: 90rpx;
				line-height: 90rpx;
				background: #fff;
				border-radius: 0;
				font-size: 28rpx;
				color: #323232;
				text-align: center;

				&::after {
					display: none;
				}
			}

			.btns-primary {
				background: var(--primary-bg-color);
			}
		}

		/*编辑收货地址*/
		.form {
			width: 100%;
			padding: 0 30rpx;

			.citem {
				padding-left: 228rpx;
				margin-bottom: 24rpx;
				margin-top: 22rpx;

				.input {
					display: block;
					width: calc(100% - 22rpx);
					font-size: 24rpx;
					color: #282828;
					height: 40rpx;
					line-height: 40rpx;
				}
			}

			.item {
				display: flex;
				line-height: 80rpx;
				padding-right: 13rpx;
				position: relative;
				z-index: 1;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				.label {
					width: 160rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #090406;
					margin-right: 10rpx;
				}

				.text {
					width: calc(100% - 170rpx);

					&::after {
						z-index: 1;
						border-radius: 40rpx;
					}

					.input {
						display: block;
						width: calc(100% - 32rpx);
						background: none;
						font-size: 28rpx;
						color: #090406;
						height: 80rpx;
						line-height: 80rpx;
						padding: 0 16rpx;
						position: relative;
						z-index: 2;
						border-radius: 16rpx;
					}

					.area {
						.input {
							width: calc(100% - 110rpx);
						}

						.more {
							white-space: nowrap;
							font-size: 20rpx;
							color: #909090;
							margin-right: 14rpx;

							.icons {
								font-size: 20rpx;
								color: #a09e9b;
								margin-left: 6rpx;
							}
						}
					}

					.textarea {
						display: block;
						width: calc(100% - 22rpx);
						height: 160rpx;
						font-size: 28rpx;
						color: #282828;
						line-height: 1.5;
						overflow: hidden;
						padding: 10rpx 16rpx;
						position: relative;
						z-index: 2;
						border-radius: 16rpx;
					}

					.addtype {
						display: flex;
						height: 100%;
						align-items: center;

						.bx {
							height: 40rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							color: #888;
							padding: 0 16rpx;

							&:not(:last-child) {
								margin-right: 20rpx;
							}

							&.on {
								background: #e4cbff;
								color: #fff;

								&::after {
									display: none;
								}
							}
						}
					}
				}

				&.wt {
					.label {
						line-height: 40rpx;
					}
				}

				&.deft {
					margin-bottom: 0;
					height: 100rpx;
					margin-top: -20rpx;

					.label {
						line-height: 100rpx;
					}

					.switchbtn {
						padding: 0 36rpx 0 100rpx;
						height: 100%;
						position: absolute;
						right: -30rpx;
						top: 0;
					}
				}
			}
		}

		/*选择地址*/
		&.city {
			padding-top: 0;
		}

		.cityhd {
			height: 110rpx;
			display: flex;
			padding: 0 14rpx;

			&::after {
				background: var(--primary-bg-color);
			}

			.item {
				height: 109rpx;
				line-height: 109rpx;
				padding: 0 56rpx;
				font-size: 26rpx;
				color: var(--primary-theme-color);
				position: relative;
				white-space: nowrap;
				z-index: 2;

				&.active {
					&::before,
					&::after {
						display: block;
						content: '';
						width: 0;
						height: 0;
						position: absolute;
						left: 50%;
						bottom: 0;
						-webkit-transform: translateX(-50%);
						transform: translateX(-50%);
					}

					&::before {
						border-left: 9rpx solid transparent;
						border-right: 9rpx solid transparent;
						border-bottom: 10rpx solid var(--primary-theme-color);
					}

					&::after {
						border-left: 8rpx solid transparent;
						border-right: 8rpx solid transparent;
						border-bottom: 11rpx solid #fff;
						bottom: -1px;
					}
				}
			}
		}

		.citybd {
			position: relative;
			height: calc(100% - 150rpx);
			padding: 20rpx 70rpx;

			.item {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #282828;

				&:not(:last-child) {
					margin-bottom: 18rpx;
				}

				&.active {
					color: var(--primary-theme-color);
				}
			}
		}
	}
}
</style>
